<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@include file="/WEB-INF/common/common.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>资料管理系统</title>
</head>
<script type="text/javascript">
    function reload() {
        $('#image').attr("src", "${ctx}/verification?date=" + new Date().getTime());
        $("#checkCode").val("");   // 将验证码清空
    }
    $(function () {
        $('#checkCode').change(function () {
            var text = $.trim($("#checkCode").val());
            $.get("${ctx}/verificationCode?code=" + text, function (data) {
                if (data.success) {
                    $("#span").html("验证成功！".fontcolor("green"));
                } else {
                    $("#span").html("验证失败！".fontcolor("red"));
                    reload();  //验证失败后需要更换验证码
                }
            });
        });


        $('#userName').change(function () {
            var a = $('#userName').val();
            $.get("${ctx}/checkUserName", {"userName": a}, function (data) {
                if (data.success) {
                    $('#username1').html(data.msg.fontcolor("green"));
                }else{
                    $('#username1').html(data.msg.fontcolor("red"));
                }
            });
        });

        $('#check').click(function () {
            var userName = $('#userName').val();
            var password1 = $('#password1').val();
            var password2 = $('#password2').val();
            var ok = true;
            if (userName == null || userName == "") {
                $('#username1').html("用户名不能为空！");
                ok = false;
            } else {
                $('#username1').html("");
            }
            if (password1 == null || password1 == "") {
                $('#password11').html("密码不能为空！");
                ok = false;
            } else {
                $('#password11').html("");
            }
            if (password2 == null || password2 == "") {
                $('#password22').html("重复密码不能为空！");
                ok = false;
            } else if (password1 != password2) {
                $('#password22').html("两次密码不一致！");
                ok = false;
            }
            else {
                $('#password22').html("");
            }
            if (ok) {
                $('#form').submit();
            }
        });
    });

</script>
<body>
<div class="container">
    <div class="col-xs-4"></div>
    <div class="col-xs-4">
        <form action="${ctx}/register" method="post" id="form">
            <br><br>
            <p class="h3 text-center">欢迎登录</p>
            <font color="red">${param.msg}${msg}</font>
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" class="form-control" name="userName" id="userName"> <span
                    id="username1"> </span>
            </div>
            <div class="form-group">
                <label> 密码：</label>
                <input type="password" class="form-control" name="passWord" id="password1">
                <span id="password11"></span>
            </div>
            <div class="form-group">
                <label> 重复密码：</label>
                <input type="password" class="form-control" name="passWord1" id="password2">
                <span id="password22"></span>
            </div>
            <p>
                <label for="verification">验证码：</label>
            <div class="col-md-4">
                <input name="checkCode" id="checkCode" type="text" class="form-control" id="verification"
                       autocomplete="off"/>
            </div>
            <a href="javascript:reload()"><img src="${ctx}/verification" alt="验证码" id="image"/>看不清？</a>
            <span id="span" style="font-size: 15px;font-weight: bold"></span>
            </p>
            <br>
            <div class="form-group">
                <input type="submit" class="btn btn-primary col-sm-4" value="注册">
                <a class="col-sm-4 col-sm-offset-4 btn btn-link" href="${ctx}/login">已有账号？</a>
            </div>


        </form>

    </div>
    <div class="col-xs-4"></div>

</div>
</body>
</html>
